<template>
    <el-dialog
    title="用户管理"
    :visible.sync="showNewRole"
    width="50%"
    :before-close="handleClose">
    <el-form :model="newroleInfos" :rules="rules" ref="newroleInfos">
    <table>
        <tr>
            <td>角色名称</td>
            <td>
                <el-form-item prop="roleName">
                    <el-input v-model="newroleInfos.roleName"></el-input>
                </el-form-item>
            </td>
        </tr>
        <tr>
            <td>角色描述</td>
            <td>
                <el-form-item prop='roleDesc'>
                    <el-input v-model="newroleInfos.roleDesc"></el-input>
                </el-form-item>
            </td>
        </tr>
        <tr>
            <td>角色</td>
            <td>
                <el-form-item prop="permissions">
                <el-tree
                    :data="addNewRoles"
                    show-checkbox
                    default-expand-all
                    node-key="permissionDesc"
                    ref="tree"
                    highlight-current
                    :props="defaultProps">
                </el-tree>

                </el-form-item>
            </td>
        </tr>
    </table>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="AddNewRoleBtn">确 定</el-button>
    </span>
    </el-dialog>
    </template>
<script>
export default {
    props:['showNewRole'],
    data(){
        return {
            newroleInfos:{},
            rules:{
                roleName:[
                    {required:true,message:'请输入角色名称',trigger:'blur'},
                    {min:2,message:'字符不能少于两个',trigger:'blur'}
                ],
                roleDesc:[
                    {required:true,message:'请输入角色描述',trigger:'blur'},
                    {min:4,message:'描述不能少于4个字',trigger:'blur'}
                ]
            },
            defaultProps: {
            children: 'children',
            label: 'permissionDesc'
            },
            
            
        }
    },
    computed:{
       allRoles(){
        //    console.log("新增角色的数据")
        //    console.log(this.$store.getters.allPermissions)
           return this.$store.getters.allPermissions;
       },
       addNewRoles(){
            var permission = [];
            var obj=this.$store.getters.allPermissions;
            for(var key in obj){
               permission.push(obj[key])
            }
            // console.log(permission)
            return permission
        },
    },
    methods:{
        handleClose(){
            // console.log(this.$parent);
            // console.log(this.$parent.showNewRole);
             this.$parent.showNewRole = false;
        },
        AddNewRoleBtn(){
        this.$refs['newroleInfos'].validate((valid) => {
            if (valid) {
                // 提交新权限
                this.newroleInfos.parentid = this.parentid;
                this.$http.post(this.$apis.AddNewRole,this.newroleInfos)
                .then((resp)=>{
                    this.$message({
                        message:resp.data.message,
                        type:resp.data.success?"success":"danger"
                    });
                    if(resp.data.success){
                        this.handleClose();
                        this.$store.dispatch('loadrolepermission')
                    }
                
                })
            } else {
                console.log('还有未验证通过的');
                return false;
                }
            });
        },
      
    },
    mounted(){
        this.$store.dispatch('loadAllPermission')
       
    },
    
}
</script>
<style lang="scss" scoped>
div /deep/ .el-dialog__header{
    text-align: left;
}
table{
    width: 80%;
    border: 1px solid #cccccc;
    margin: auto;
    tr{
        width: 100%;
        height: 50px;
        border-bottom:1px solid #cccccc;
        &:hover{
            background:rgba(225, 246, 252, 0.5);
        }
        td{
            line-height: 50px;
            border-right: 1px solid #cccccc;
        } 
    }
}
</style>
